<template>
	<view class="home-container">
		<!-- 顶部装饰 -->
		<view class="header-decoration">
			<view class="wave-pattern"></view>
			<view class="floating-bubbles">
				<view class="bubble bubble-1"></view>
				<view class="bubble bubble-2"></view>
				<view class="bubble bubble-3"></view>
			</view>
		</view>
		
		<!-- 欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-content">
				<text class="welcome-title">欢迎使用鱼邦</text>
				<text class="welcome-subtitle">智慧渔业管理平台</text>
			</view>
			<view class="weather-info">
				<text class="weather-text">今日天气：晴朗</text>
			</view>
		</view>
		
		<!-- 快捷操作区 -->
		<view class="quick-actions">
			
			<view class="action-cards">
				<view class="action-card primary" @click="goTo('boTou')">
					<view class="card-icon-wrapper">
						<image class="action-icon" src="/static/boTou.png"></image>
						<view class="icon-glow"></view>
					</view>
					<view class="card-content">
						<text class="action-title">塘头单登记</text>
						<text class="action-desc">快速登记塘头单据</text>
					</view>
					<view class="card-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>
				<view class="action-card secondary" @click="goTo('gongChang')">
					<view class="card-icon-wrapper">
						<image class="action-icon" src="/static/gongChang.png"></image>
						<view class="icon-glow"></view>
					</view>
					<view class="card-content">
						<text class="action-title">工厂单登记</text>
						<text class="action-desc">工厂加工单据管理</text>
					</view>
					<view class="card-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>
				<view class="action-card tertiary" @click="goTo('reimburse')">
					<view class="card-icon-wrapper">
						<image class="action-icon" src="/static/reimburse.png"></image>
						<view class="icon-glow"></view>
					</view>
					<view class="card-content">
						<text class="action-title">报销单登记</text>
						<text class="action-desc">统一管理费用报销</text>
					</view>
					<view class="card-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 资讯区域 -->
		<view class="news-section">
			<view class="section-title">
				<text class="title-text">最新资讯</text>
				<view class="title-decoration"></view>
			</view>
			
			<scroll-view class="news-list" scroll-y @scrolltolower="loadMoreNews">
				<!-- 加载状态 -->
				<view class="loading-container" v-if="loading && news.length === 0">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>
				
		<!-- 资讯列表 -->
				<view class="news-item" v-for="(item, idx) in news" :key="item.id || idx" @click="viewDetail(item)">
					<view class="news-card">
						<view class="news-image-wrapper" v-if="item.img">
							<image class="news-img" :src="item.img" mode="aspectFill"></image>
							<view class="image-overlay"></view>
						</view>
				<view class="news-content">
							<view class="news-header">
								<text class="news-title">{{item.title}}</text>
								<view class="news-badge">热门</view>
							</view>
							<text class="news-desc">{{item.desc}}</text>
							<view class="news-footer">
								<view class="news-meta">
									<text class="news-time">{{item.createTime}}</text>
								</view>
								<view class="news-action">
									<text class="news-link">查看详情</text>
									<text class="arrow-icon">→</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view class="empty-container" v-if="!loading && news.length === 0">
					<view class="empty-icon">📰</view>
					<text class="empty-text">暂无资讯</text>
					<text class="empty-desc">精彩内容即将上线</text>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="showLoadMore">
					<view class="loading-spinner"></view>
					<text class="load-more-text">加载更多...</text>
			</view>
				
				<!-- 没有更多数据 -->
				<view class="no-more" v-if="!hasMore && news.length > 0">
					<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import ErrorHandler from '../../utils/error-handler.js'
	import userManager from '../../utils/user-manager.js'
	
	export default {
		data() {
			return {
				news: [],
				loading: false,
				refreshing: false,
				hasMore: true,
				currentPage: 1,
				pageSize: 10,
				userInfo: null
			}
		},
		
		computed: {
			// 计算是否显示加载更多
			showLoadMore() {
				return this.news.length > 0 && this.hasMore && !this.loading
			}
		},
		
		onLoad() {
			this.loadUserInfo()
			this.loadNews()
		},
		
		onShow() {
			// 页面显示时刷新用户信息
			this.loadUserInfo()
		},
		
		onPullDownRefresh() {
			this.refreshNews()
		},
		
		onReachBottom() {
			this.loadMoreNews()
		},
		methods: {
			/**
			 * 加载用户信息
			 */
			loadUserInfo() {
				try {
					const userData = userManager.getAllUserData()
					this.userInfo = userData.userInfo
				} catch (error) {
					console.error('加载用户信息失败:', error)
				}
			},
			
			/**
			 * 加载资讯列表
			 */
			async loadNews() {
				if (this.loading) return
				
				try {
					this.loading = true
					
					// 模拟API调用
					const mockNews = [
						{
							id: 1,
							title: '罗非鱼斜管虫病防治指南',
							desc: '罗非鱼养殖过程中，斜管虫是低温季节不可忽视的病虫',
							img: '/static/news1.png',
							createTime: '2024-01-15'
						},
						{
							id: 2,
							title: '高手都知道的罗非鱼养殖经营',
							desc: '水温很重要，掌握这些技巧让你的养殖事半功倍',
							img: '/static/news2.png',
							createTime: '2024-01-14'
						},
						{
							id: 3,
							title: '罗非鱼车轮虫病防治指南',
							desc: '车轮虫是什么，为什么危害大，如何有效防治',
							img: '/static/news3.png',
							createTime: '2024-01-13'
						},
						{
							id: 4,
							title: '养鱼先养水，六大水质指标得盯紧',
							desc: '水质管理是养殖成功的关键，这些指标你必须了解',
							img: '/static/news2.png',
							createTime: '2024-01-12'
						}
					]
					
					// 模拟网络延迟
					await new Promise(resolve => setTimeout(resolve, 500))
					
					if (this.currentPage === 1) {
						this.news = mockNews
					} else {
						this.news = [...this.news, ...mockNews]
					}
					
					// 模拟没有更多数据
					if (this.currentPage >= 2) {
						this.hasMore = false
					}
							
						} catch (error) {
					ErrorHandler.handle(error, '加载资讯')
				} finally {
					this.loading = false
				}
			},
			
			/**
			 * 刷新资讯
			 */
			async refreshNews() {
				this.refreshing = true
				this.currentPage = 1
				this.hasMore = true
				await this.loadNews()
				this.refreshing = false
				uni.stopPullDownRefresh()
			},
			
			/**
			 * 加载更多资讯
			 */
			async loadMoreNews() {
				if (!this.hasMore || this.loading) return
				
				this.currentPage++
				await this.loadNews()
			},
			
			/**
			 * 跳转到登记页面
			 */
			goTo(type) {
				// 跳转到登记页面
				if (type === 'boTou') {
					uni.navigateTo({
						url: '/pages/home/botou/index'
					});
					return
				}
				if (type === 'gongChang') {
					uni.navigateTo({
						url: '/pages/home/gongchang/index'
					});
					return
				}
				if (type === 'reimburse') {
					uni.navigateTo({
						url: '/pages/home/skin-damage'
					});
					return
				}
			},
			
			openReimbursement() {
				if (!userManager.isLoggedIn || !userManager.isLoggedIn()) {
					ErrorHandler.showInfo('登录提示', '请先登录后再使用该功能');
					return
				}
				const candidates = [
					'/pages/reimburse/index',
					'/pages/expense/index',
					'/pages/home/reimburse/index'
				];
				const tryNavigate = (idx) => {
					if (idx >= candidates.length) {
						ErrorHandler.showInfo('提示', '报销单页面未配置');
						return
					}
					uni.navigateTo({
						url: candidates[idx],
						fail: () => tryNavigate(idx + 1)
					});
				};
				tryNavigate(0);
			},
			/**
			 * 查看资讯详情
			 */
			viewDetail(item) {
				// 跳转到资讯详情页
				uni.navigateTo({
					url: `/pages/home/news/detail?id=${item.id}&title=${encodeURIComponent(item.title)}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-container {
		background: $bg-secondary;
		min-height: 100vh;
		position: relative;
	}
	
	/* 顶部装饰 */
	.header-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300rpx;
		z-index: 1;
		overflow: hidden;
	}
	
	.wave-pattern {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		border-radius: 0 0 50% 50%;
		transform: scale(1.2);
	}
	
	.floating-bubbles {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	.bubble {
		position: absolute;
		background: rgba(255,255,255,0.1);
		border-radius: 50%;
		animation: bubble-float 8s ease-in-out infinite;
	}
	
	.bubble-1 {
		width: 60rpx;
		height: 60rpx;
		top: 20%;
		left: 10%;
		animation-delay: 0s;
	}
	
	.bubble-2 {
		width: 40rpx;
		height: 40rpx;
		top: 60%;
		right: 20%;
		animation-delay: 2s;
	}
	
	.bubble-3 {
		width: 80rpx;
		height: 80rpx;
		top: 40%;
		left: 70%;
		animation-delay: 4s;
	}
	
	@keyframes bubble-float {
		0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
		50% { transform: translateY(-30rpx) scale(1.1); opacity: 1; }
	}

	.top-actions {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 30rpx 0 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.action {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 45%;
		background: #f8fafd;
		border-radius: 12rpx;
		padding: 30rpx 0;
		margin: 0 10rpx;
		box-shadow: 0 2rpx 8rpx #e6e6e6;
	}

	.action-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.action-text {
		color: #3b6ca8;
		font-size: 30rpx;
	}

	.action-text.active {
		color: #1ca0f8;
	}

	.news-list {
		padding: 0;
		margin-top: 20rpx;
		/* 动态高度，减去tabbar高度 */
		height: calc(100vh - 100rpx - 80rpx);
		/* 100rpx为tabbar高度，80rpx为顶部actions高度 */
		overflow-y: auto;
		padding-bottom: 40rpx;
		/* 适当留白 */
	}

	.news-item {
		display: flex;
		align-items: flex-start;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 0;
		box-shadow: 0 2rpx 8rpx #e6e6e6;
		transition: all 0.3s ease;
	}
	
	.news-item:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 4rpx #e6e6e6;
	}

	.news-content {
		flex: 1;
	}

	.news-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.news-desc {
		font-size: 28rpx;
		color: #888;
		margin-bottom: 8rpx;
	}

	.news-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}
	
	.news-time {
		color: #999;
		font-size: 24rpx;
	}

	.news-link {
		color: #1ca0f8;
		font-size: 26rpx;
	}
	
	.loading-container, .empty-container {
		text-align: center;
		padding: 60rpx 0;
	}
	
	.loading-text, .empty-text {
		color: #999;
		font-size: 28rpx;
	}
	
	.load-more, .no-more {
		text-align: center;
		padding: 30rpx 0;
	}
	
	.load-more-text, .no-more-text {
		color: #999;
		font-size: 26rpx;
	}

	.news-img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background: #eaeaea;
	}

	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #fff;
		display: flex;
		border-top: 1rpx solid #eee;
		z-index: 100;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #888;
		font-size: 22rpx;
	}

	.tabbar-item.active {
		color: #1ca0f8;
	}

	.tabbar-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
	}
	
	/* 新增样式 - 欢迎区域 */
	.welcome-section {
		position: relative;
		z-index: 2;
		padding: 60rpx 30rpx 40rpx 30rpx;
		text-align: center;
		max-width: 750rpx;
		margin: 0 auto;
	}
	
	.welcome-content {
		margin-bottom: 20rpx;
	}
	
	.welcome-title {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: $text-white;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
	}
	
	.welcome-subtitle {
		display: block;
		font-size: 24rpx;
		color: rgba(255,255,255,0.8);
		font-weight: 400;
	}
	
	.weather-info {
		background: rgba(255,255,255,0.1);
		border-radius: $radius-lg;
		padding: 16rpx 24rpx;
		backdrop-filter: blur(10rpx);
		display: inline-block;
	}
	
	.weather-text {
		font-size: $font-sm;
		color: rgba(255,255,255,0.9);
	}
	
	/* 快捷操作区 */
	.quick-actions {
		position: relative;
		z-index: 2;
		padding: 10rpx 30rpx 40rpx 30rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.title-text {
		font-size: $font-xl;
		font-weight: 600;
		color: $text-primary;
		margin-right: 16rpx;
	}
	
	.title-decoration {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(90deg, $primary 0%, transparent 100%);
	}
	
	.action-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	/* 响应式设计 - 大屏幕 */
	@media screen and (min-width: 800rpx) {
		.action-cards {
			flex-direction: row;
			gap: 24rpx;
		}
		
		.action-card {
			flex: 1;
		}
	}
	
	/* 响应式设计 - 大屏幕 */
	@media screen and (min-width: 1200rpx) {
		.welcome-section,
		.quick-actions,
		.news-section {
			max-width: 900rpx;
		}
	}
	
	/* 响应式设计 - 中等屏幕 */
	@media screen and (max-width: 900rpx) and (min-width: 600rpx) {
		.welcome-section,
		.quick-actions,
		.news-section {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
	}
	
	/* 响应式设计 - 小屏幕 */
	@media screen and (max-width: 600rpx) {
		.welcome-section {
			padding: 40rpx 20rpx 30rpx 20rpx;
		}
		
		.quick-actions {
			padding: 0 20rpx 30rpx 20rpx;
		}
		
		.news-section {
			padding: 0 20rpx 30rpx 20rpx;
		}
		
		.action-card {
			padding: 24rpx;
		}
		
		.action-icon {
			width: 50rpx;
			height: 50rpx;
		}
		
		.news-content {
			padding: 20rpx;
		}
		
		.news-title {
			font-size: $font-md;
		}
		
		.news-desc {
			font-size: $font-sm;
		}
	}
	
	/* 响应式设计 - 超小屏幕 */
	@media screen and (max-width: 480rpx) {
		.welcome-section,
		.quick-actions,
		.news-section {
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		
		.news-content {
			padding: 16rpx;
		}
		
		.news-title {
			font-size: $font-sm;
			line-height: 1.3;
		}
		
		.news-desc {
			font-size: 24rpx;
			line-height: 1.4;
		}
	}
	
	.action-card {
		background: $bg-primary;
		border-radius: $radius-lg;
		padding: 30rpx;
		box-shadow: $shadow-md;
		display: flex;
		align-items: center;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		border: 1rpx solid $border-light;
	}
	
	.action-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		transition: left 0.5s;
	}
	
	.action-card:hover::before {
		left: 100%;
	}
	
	.action-card:active {
		transform: translateY(2rpx);
		box-shadow: $shadow-sm;
	}
	
	.action-card.primary {
		border-left: 6rpx solid $primary;
	}
	
	.action-card.secondary {
		border-left: 6rpx solid $secondary;
	}

	.action-card.tertiary {
		border-left: 6rpx solid #ff9800;
	}
	
	.card-icon-wrapper {
		position: relative;
		margin-right: 24rpx;
	}
	
	.icon-glow {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		right: -8rpx;
		bottom: -8rpx;
		background: linear-gradient(45deg, rgba(30, 136, 229, 0.1), transparent);
		border-radius: 50%;
		animation: icon-glow 2s ease-in-out infinite alternate;
	}

	.icon-glow.warm {
		background: linear-gradient(45deg, rgba(255, 152, 0, 0.18), transparent);
	}
	
	@keyframes icon-glow {
		from { opacity: 0.3; }
		to { opacity: 0.8; }
	}
	
	.card-content {
		flex: 1;
	}
	
	.action-title {
		display: block;
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
		margin-bottom: 8rpx;
	}
	
	.action-desc {
		display: block;
		font-size: $font-sm;
		color: $text-secondary;
	}
	
	.card-arrow {
		margin-left: 16rpx;
	}
	
	.arrow-icon {
		font-size: 24rpx;
		color: $primary;
		font-weight: bold;
	}
	
	/* 资讯区域 */
	.news-section {
		position: relative;
		z-index: 2;
		padding: 0 30rpx 40rpx 30rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}
	
	.news-card {
		background: $bg-primary;
		border-radius: $radius-lg;
		box-shadow: $shadow-md;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		border: 1rpx solid rgba(30, 136, 229, 0.08);
		width: 100%;
	}
	
	.news-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(30, 136, 229, 0.02) 0%, rgba(38, 198, 218, 0.02) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	
	.news-card:active {
		transform: translateY(4rpx) scale(0.98);
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
		border-color: rgba(30, 136, 229, 0.15);
	}
	
	.news-card:active::before {
		opacity: 1;
	}
	
	.news-image-wrapper {
		position: relative;
		height: 200rpx;
		overflow: hidden;
	}
	
	.image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
	}
	
	.news-content {
		padding: 28rpx;
		position: relative;
		z-index: 1;
	}
	
	.news-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}
	
	.news-title {
		font-size: $font-lg;
		font-weight: 700;
		color: $text-primary;
		flex: 1;
		margin-right: 16rpx;
		line-height: 1.4;
		letter-spacing: 0.5rpx;
	}
	
	.news-badge {
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		color: $text-white;
		font-size: $font-xs;
		padding: 6rpx 14rpx;
		border-radius: $radius-sm;
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx rgba(30, 136, 229, 0.3);
		letter-spacing: 0.5rpx;
	}
	
	.news-desc {
		font-size: $font-md;
		color: $text-secondary;
		line-height: 1.6;
		margin-bottom: 20rpx;
		letter-spacing: 0.3rpx;
	}
	
	.news-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.news-meta {
		flex: 1;
	}
	
	.news-time {
		font-size: $font-sm;
		color: $text-tertiary;
		font-weight: 500;
		letter-spacing: 0.3rpx;
	}
	
	.news-action {
		display: flex;
		align-items: center;
	}
	
	.news-link {
		font-size: $font-sm;
		color: $primary;
		margin-right: 8rpx;
		font-weight: 600;
		letter-spacing: 0.3rpx;
		transition: all 0.3s ease;
	}
	
	.news-link:hover {
		color: $secondary;
	}
	
	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-desc {
		font-size: $font-sm;
		color: $text-tertiary;
		margin-top: 8rpx;
	}
	
	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid $border-light;
		border-top: 3rpx solid $primary;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 12rpx;
	}
</style>